<template>
	<view class="container">
		<view class="heard">
			<view class="heard-title">
				<text class="title">教学视频</text>
			</view>
			<view class="heard-image" >
				 <viewVideo :drama="dramaForm" v-if="dramaForm.playUrl"  style="height: 100%;width: 100%;" @play="playUp" @timeupdate="timeupdate"  @playcomplete="playcomplete" />
				<image class="centered-image" v-else :src="imageSrc"/>
			</view>
		</view>
		<view class="main">
			<view class="main-title" >
				学习任务
			</view>
			<view class="main-case">
				
				<div v-for="(i,k) in dataList" :key="k"> 
				<!-- {{dataList[k]['game'+(k+1)+'Size']}} -->
					<view :class="i.butState===0?'case':'case2'" v-if="dataList[k]['game'+(k+1)+'Flag']">
						<u-row gutter="16">
							<u-col span="9">
								<view class="point-container-inline">
									<image class="point-icon" :src="i.iconSrc" />
									<text class="points">{{i.name}}</text>
								</view>
							</u-col>
							<u-col span="3">
								<view :class="i.butState===0?'point-container-inline state':'point-container-inline state2'" @click="goToRegister(k+1,dataList[k]['game'+(k+1)+'Size'])">
									<text >去练习</text>
									<view style="padding-left: 10rpx;">></view>
								</view>
							</u-col>
						</u-row>
					</view>
				</div>
			</view>
		</view>
		<view style="height: 5rpx;" />
	</view>
</template>

<script>
	import { getForPlay, selectGameType,saveRecord } from "./api/index"
	import viewVideo from './videoPreview/viewVideo.vue';
	export default {
		 components: {
		    viewVideo
		  },
		  
		data() {
			return {
				watchTime:0,// 实际观看时间
				formVideoTime:{},//视频时间
				intervalId:null,//定时请求保存时长
				dramaForm:{
					limit_url:''
				},
				clsName:'第一课',
				clsId:null,
				crsId:null,
				GameForm:{},//游戏状态
				clsCrsId:null,//id
				videoForm:{},//视频播放凭证信息
				imageSrc:"https://www.afbeijing.net/static_resources/assets/videoImg.png",
				dataList:[
					// {
					// 	iconSrc:"https://www.afbeijing.net/static_resources/assets/spxx2.png",
					// 	name:"视频学习",
					// 	butState:0
					// },
					{
						iconSrc:"https://www.afbeijing.net/static_resources/assets/zsdhg.png",
						name:"听写练习（翻牌）",
						butState:1
					},
					{
						iconSrc:"https://www.afbeijing.net/static_resources/assets/gdlx.png",
						name:"听写练习（连线）",
						butState:1
					},
					{
						iconSrc:"https://www.afbeijing.net/static_resources/assets/txlx.png",
						name:"知识点回顾（拼图）",
						butState:1
					},
					{
						iconSrc:"https://www.afbeijing.net/static_resources/assets/gdlx.png",
						name:"跟读练习",
						butState:1
					},
					
					{
						iconSrc:"https://www.afbeijing.net/static_resources/assets/kyjj.png",
						name:"对话练习",
						butState:1
					},
					
					{
						iconSrc:"https://www.afbeijing.net/static_resources/assets/kyjj.png",
						name:"知识点回顾（看图选句）",
						butState:1
					},
				]
			}
		},
		onHide() {
			console.log('onHide: 页面隐藏时触发');
			clearInterval(this.intervalId);
		},
		onUnload() {
			 // 页面卸载时清空定时任务
		if (this.intervalId) {
			clearInterval(this.intervalId);
			console.log('定时任务已清除');
		}
		
		},
		onLoad(e) {
			console.log(e,'参数')
			this.clsCrsId=Number(e.data)
			this.clsId=e.clsId
			this.crsId=e.crsId
			this.clsName=e.clsName
		  // 调用接口取到该用户播放的位置（秒）
			this.watchTime = 0;
			// this.getLive()
			this.selectGameList()//查询游戏状态
			this.getLive()//获取播放视频链接
			
		},
		methods: {
			//查询游戏状态
			selectGameList(){
				var jsonData = {
					crsId:this.crsId
					// this.clsCrsId
				};
				selectGameType(jsonData).then(response => {
				console.log(response,'状态')
				if (response.code === 0) {
					this.GameForm =response.data
					this.dataList[0].game1Flag=response.data.game1Flag
					this.dataList[0].game1Size=response.data.game1Size
					this.dataList[1].game2Flag=response.data.game2Flag
					this.dataList[1].game2Size=response.data.game2Size
					this.dataList[2].game3Flag=response.data.game3Flag
					this.dataList[2].game3Size=response.data.game3Size||1
					this.dataList[3].game4Flag=response.data.game4Flag
					this.dataList[3].game4Size=response.data.game4Size
					this.dataList[4].game5Flag=response.data.game5Flag
					this.dataList[4].game5Size=response.data.game5Size
					this.dataList[5].game6Flag=response.data.game6Flag
					this.dataList[5].game6Size=response.data.game6Size
				}else{
					uni.$u.toast(response.msg)
				}
				}).catch(errors => {
									// uni.$u.toast(errors)
				})
			},
			
			//播放时间
			timeupdate(e){
					// console.log(e.detail,'播放时间')
				this.formVideoTime=e.detail
				 // 记录用户当前视频进度
					//   var jumpTime = parseInt(e.detail.currentTime);
					//   // 判断用户当前视频进度比实际观看时间差别，这里只判断了用户快进
				 //  if (jumpTime - this.watchTime > 3) {
					// // 差别过大，调用seek方法跳转到实际观看时间
					// this.videoContext.seek(this.watchTime);
					// 	uni.showToast({
					// 	　　title: '未完整看完该视频，不能快进',
					// 	　　icon: 'none',
					// 	　　duration: 2000
					// 	});
				 //  } else {
					// this.formVideoTime.currentTime = parseInt(e.detail.currentTime);
					// if (this.videoRealTime > this.watchTime) {
					//   this.watchTime = this.videoRealTime;
					// }
				 //  }
				
			},
			// 播放
			playUp(e){
				console.log(e)
				if(e==='play'){
					//播放
					this.intervalId = setInterval(() => {
						 console.log(e,'播放保存')
					      this.saveRecordJs()
					}, 5000);
				}else if(e==='pause'){
					 console.log('暂停',this.intervalId)
					// 暂停
					 clearInterval(this.intervalId);
				}
				
			},
			//保存学习时长
			saveRecordJs(){
				var jsonData = {
					"clsCrsId": this.clsCrsId, 
					"currentTime":this.formVideoTime.currentTime, 
					"durationTime": this.formVideoTime.duration, 
					"seekTime": this.formVideoTime.currentTime
				};
				saveRecord(jsonData).then(response => {
					console.log(response)
					if (response.code === 0) {
						
					}
				}).catch(function(e){
					console.log(e,'222222')
				})
			},
			//播放完成
			playcomplete(e){
				console.log(e,'播放完成')
				this.saveRecordJs()//播放完成保存进度
				clearInterval(this.intervalId);//关闭保存时长事件
			},
			// 获取数据
			getLive() {
			  var jsonData = {
				  clsCrsId:this.clsCrsId
			  };
			  getForPlay(jsonData).then(response => {
				console.log(response,'mp4地址')
				if (response.code === 0) {
					this.dramaForm =response.data
					
				}else{
				 uni.$u.toast(response.msg) 
				}
			  }).catch(errors => {
				// uni.$u.toast(errors)
			  })
			},
			goToRegister(e,key) {
				console.log(e,key)
				console.log(key,'游戏几关')
				switch (e){
					case 1:
						// // 视频学习
						// uni.navigateTo({
						// 	url: '/src/views/pageStudy/videoCourse/index' // 这里替换成你实际要跳转的页面路径
						// });
						// break;
						// //翻牌游戏
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/tingxie/fanpai/index?crsId='+this.crsId+'&id='+this.clsCrsId+'&clsId='+this.clsId+'&Size='+key //；翻牌
						});
						break;
					case 2:
						// 听写练习-连线
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/tingxie/lianxian/index?crsId='+this.crsId+'&id='+this.clsCrsId+'&clsId='+this.clsId+'&Size='+key // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 3:
						// 拼图
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/zhishidianhuigu/pintu/index?crsId='+this.crsId+'&id='+this.clsCrsId+'&clsId='+this.clsId+'&Size='+key // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 4:
						// 跟读
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/gendu/index?crsId='+this.crsId+'&id='+this.clsCrsId+'&clsId='+this.clsId+'&Size='+key// kanmtu
						});
						break;
					case 5:
						// 对话练习
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/kouyujiaoji/index?crsId='+this.crsId+'&id='+this.clsCrsId+'&clsId='+this.clsId// 这里替换成你实际要跳转的页面路径
						});
						break;
					case 6:
						// 看图选句
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/zhishidianhuigu/kantuxuanju/index?crsId='+this.crsId+'&id='+this.clsCrsId+'&Size='+key// 看图选句
						});
						break;
					case 7:
						// 游戏7 没有用的
						uni.navigateTo({
							url: '/src/views/pageStudy/pagePlay/kouyujiaoji/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.container {
		padding: 30rpx;
		height: 100vh;
	}
	.heard{
		padding: 20rpx;
		width: 100%;
		background-image: url(#{$bgImageUrl}/assets/lunbokuang.png);
		background-size: 100% 100%;;
		background-repeat: no-repeat;
	}
	.heard-title{
		padding-left: 10rpx;
		padding-top: -40rpx;
		
	}
	.title{
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.heard-image{
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		height: 365rpx;
	}
	.centered-image{
		background-color: #3ABD78;
		width: 100%;
		height: 365rpx;
		border-radius: 30rpx; // 设置圆角半径
	}
	.main{
		width: 100%;
		margin-top: 50rpx;
		background-image: url(#{$bgImageUrl}/assets/renwukuang.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom: 30rpx;
	}
	.main-title{
		padding-left: 30rpx;
		padding-top: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 25rpx;
		color: #FF8106;
	}
	.main-case{
		padding: 40rpx;
	}
	.case{
		padding-left: 20rpx;
		padding-right: 20rpx;
		width: 100%;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.case2{
		padding-left: 20rpx;
		padding-right: 20rpx;
		width: 100%;
		height: 80rpx;
		background: #FFF9EB;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.point-container-inline{
		display: flex;
		align-items: center;
	}
	.points{
		padding-left: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 80rpx;
	}
	.point-icon{
		width: 40rpx;
		height: 40rpx;
		padding-left: 20rpx;
	}
	.state{
		padding-left: 25rpx;
		padding-right: 10rpx;
		height: 36rpx;
		background: #808080;
		border-radius: 18rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 35rpx;
	}
	.state2{
		padding-left: 25rpx;
		padding-right: 10rpx;
		height: 36rpx;
		background: #FF8106;
		border-radius: 18rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 35rpx;
	}
	
</style>